<template>
  <div>
  <el-dialog title="请求详情" :visible.sync="dialogTableVisible">
    <el-input type="textarea" rows="10" v-model="now_params"></el-input>
    <hr>
    <pre align="left">
      {{now_result}}
    </pre>
    <el-button @click="send_again()">测试发送</el-button>
  </el-dialog>
  <el-table
    :data="askList"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="时间"
      width="200">
    </el-table-column>
    <el-table-column
      prop="params"
      label="参数">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="ask_detail(scope.row.key)">查看</el-button>
        <el-button type="text" size="small" @click="delete_ask(scope.row.key)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    :current-page.sync='currentPage'
    layout="prev, pager, next"
    :total="dataCount">
  </el-pagination>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'AskList',
  props: {
    currentUrl: String,
  },
  data() {
    return {
      dataCount: 0,
      currentPage: 1,
      askList: [],
      dialogTableVisible: false,
      now_params: '',
      now_result: '',
      now_key: '',
    };
  },
  created() {
    this.fresh_date();
  },
  methods: {
    fresh_date() {
      const self = this;
      axios.get('/api/ask/list', { params: { page: this.currentPage, url: this.currentUrl } }).then((res) => {
        self.dataCount = res.data.count;
        self.askList = res.data.data;
      });
    },
    delete_ask(key) {
      const self = this;
      axios.get('/api/ask/delete', { params: { key } }).then(() => { self.fresh_date(); });
    },
    ask_detail(key) {
      const self = this;
      this.now_key = key;
      axios.get('/api/ask/detail', { params: { key } }).then((res) => {
        self.now_params = JSON.stringify(res.data.params);
        self.now_result = res.data.result;
        self.dialogTableVisible = true;
      });
    },
    send_again() {
      const formData = new FormData();
      const self = this;
      formData.append('key', this.now_key);
      formData.append('params', this.now_params);
      self.now_result = '正在发送请求...';
      axios.post('/api/ask/send_again', formData).then((res) => { self.now_result = res.data; }).catch(
        () => { self.now_result = '请求中发生了错误'; },
      );
    },
  },
  watch: {
    currentUrl() {
      this.fresh_date();
    },
    currentPage() {
      this.fresh_date();
    },
  },
};
</script>

<style scoped>

</style>
